<template>
  <!-- 车辆总览 -->
  <div class="left-top-box">
    <group-card title="人员/车辆制证总览">
      <!--      <div class="left-top-box-inner">-->
      <!--        <div class="card-list-box">-->
      <!--          <div class="car-title-box">-->
      <!--            <span>人员证件总数：</span> {{ addCommaToNumber(cardAllNum) }}-->
      <!--          </div>-->
      <!--          <div-->
      <!--              class="card-type-box"-->
      <!--              v-for="item in CardTypeNames"-->
      <!--              :key="item.key"-->
      <!--          >-->
      <!--            <div class="card-icon" :class="`card-${item.key}`"></div>-->
      <!--            <div class="card-info">-->
      <!--              <div class="card-num" v-html="addCommaToNumber(item.num)"></div>-->
      <!--              <div class="card-name" v-html="item.name"></div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        &lt;!&ndash; 图表按钮 &ndash;&gt;-->
      <!--        <div class="charts-btn-list">-->
      <!--          <div class="car-title-box">-->
      <!--            <span>车辆证件总数：</span> {{ addCommaToNumber(carAllNum) }}-->
      <!--          </div>-->
      <!--          <div class="charts-btn" v-for="(item, i) in CarTypeNames" :key="i">-->
      <!--            <div class="charts-btn-icon">-->
      <!--              <div :class="`car-icon car-${i}`"></div>-->
      <!--              &lt;!&ndash; <div>{{ i }}</div> &ndash;&gt;-->
      <!--              <div class="car-name">{{ item.name }}</div>-->
      <!--            </div>-->
      <!--            <div class="charts-btn-num">{{ item.count }}</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div style="position: relative">
        <div class="my-chart" ref="chartRef"></div>
        <div class="chart-img"></div>
      </div>
    </group-card>
  </div>
</template>

<script setup name="carView">
import { computed, onMounted, reactive, ref, onUnmounted } from "vue";
import { addCommaToNumber } from "@/utils";

const CardTypeNames = reactive([
  { num: 190, name: "ITTF", key: "sjyl" },
  { num: 222, name: "WTMG", key: "agm" },
  { num: 501, name: "CTTA", key: "zwh-1" },
  { num: 1603, name: "代表队", key: "zwh" },
  { num: 115, name: "技术官员", key: "jsgy" },
  { num: 544, name: "兴奋剂检测", key: "ydd" },
  { num: 2, name: "组委会", key: "mt" },
  { num: 332, name: "第三方执行机构", key: "zzs" },
  { num: 1236, name: "志愿者", key: "ab" },
  { num: 385, name: "安保保障", key: "zyz" },
  { num: 36, name: "媒体", key: "zgyxgmz" },
  { num: 23, name: "转播", key: "rtk-gzry" },
  { num: 2250, name: "世界杯公园", key: "rtk-sjyljb" },
]);
const CarTypeNames = reactive([
  { count: 190, name: "专用车证T1", key: "sjyl" },
  { count: 222, name: "专用车证T2", key: "agm" },
  { count: 501, name: "专用车证T3", key: "zwh-1" },
  { count: 1603, name: "运行保障车", key: "zwh" },
  { count: 115, name: "临时车", key: "jsgy" },
  { count: 544, name: "工作车", key: "ydd" },
  { count: 2, name: "贵宾车", key: "mt" },
]);
const props = defineProps({
  personTypeList: {
    type: Array,
    default: () => [],
  },
  carInfoList: {
    type: Array,
    default: () => [],
  },
});
// 定义一个颜色映射表，根据分类动态设置颜色
const colorMap = {
  组委会: "rgba(254, 242, 202, 1)",
  第三方执行机构人员: "rgba(149, 80, 203, 1)",
  安保保障: "rgba(0, 0, 0, 1)",
  特殊卡类型: "rgba(229, 76, 94, 1)",
  志愿者: "rgba(239, 148, 158, 1)",
  技术官员: "rgba(48, 192, 180, 1)",
  WTMG: "rgba(192, 0, 0, 1)",
  代表队: "rgba(68, 113, 196, 1)",
  ITTF: "rgba(87, 141, 49, 1)",
  CTTA: "rgba(255, 192, 0, 1)",
  赞助商: "rgba(127, 127, 127, 1)",
  媒体: "rgba(131, 63, 10, 1)",
  转播: "rgb(73,179,205)",
};

// 动态计算数据（不会修改 CardTypeNames）
const computedCardTypeNames = computed(() => {
  return CardTypeNames.map((item) => {
    const getNumItem = props.personTypeList.find(
      (pItem) => pItem.name === item.name
    ) || { count: 0 };
    return {
      ...item, // 保持原始结构不变
      dynamicNum: getNumItem.count, // 动态值，新增字段
    };
  });
});

// 总人数计算
const cardAllNum = computed(() =>
  computedCardTypeNames.value.reduce((pre, curr) => pre + curr.dynamicNum, 0)
);

const carAllNum = computed(() =>
  props.carInfoList.reduce((pre, curr) => pre + curr.count, 0)
);
import * as echarts from "echarts";

const filteredList = props.personTypeList.filter(
  (item) => item.name != null && item.name !== ""
);
const chartRef = ref(null);
let chart = null;
const echartData = computed(() => {
  return props.personTypeList.map((item) => ({
    value: item.count || 0, // 设置 value 为 count
    name: item.name || "未命名", // 设置 name，为空时显示默认值
    itemStyle: {
      normal: {
        // 动态设置颜色，如果没有找到对应的颜色，设置一个默认颜色
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
          { offset: 0, color: colorMap[item.name] || "rgba(200, 200, 200, 1)" },
          { offset: 1, color: "transparent" },
        ]),
      },
    },
  }));
});
let total_datas = 0;
for (var i = 0; i < echartData.length; i++) {
  total_datas += echartData[i].value;
}

let rich = {
  yellow: {
    color: "#ffc72b",
    align: "center",
  },
  total: {
    color: "#ffc72b",
    align: "center",
  },

  blue: {
    color: "#49dff0",
    align: "center",
  },
  hr: {
    borderColor: "#0b5263",
    width: "100%",
    borderWidth: 1,
    height: 0,
  },
};
const option = {
  legend: {
    orient: "horizontal", // 设置为垂直排列
    x: "5%", // 图例靠右
    y: "1%", // 图例居中
    symbol: "circle", // 将图例图形设置为圆形
    itemWidth: 12, // 设置图例图形的宽
    itemHeight: 12, // 设置图例图形的高
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)", // 图例文字颜色
    },
    itemGap: 10, // 图例之间的间距
    data: filteredList.map((item) => ({
      name: item.name,
      icon: "circle", // 图例的形状
      itemStyle: {
        color: colorMap[item.name] || "rgba(200, 200, 200, 1)", // 使用 colorMap 中的颜色
      },
    })),
  },
  series: [
    {
      name: "人员/车辆制证总览",
      type: "pie",
      itemStyle: {
        normal: {
          borderWidth: 1,
          borderColor: "rgba(153, 153, 153, 0.6)",
        },
      },
      radius: ["45%", "70%"],
      center: ["50%", "62%"],
      hoverAnimation: false,
      color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
      label: {
        normal: {
          show: false,
        },
      },
      data: echartData.value,
    },
  ],
};

// 初始化图表
const initChart = () => {
  if (chart) {
    chart.dispose();
  }
  chart = echarts.init(chartRef.value);
  chart.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
  chart && chart.resize();
};

onMounted(() => {
  // 在组件加载时，先检查数据是否已加载
  if (props.personTypeList.length > 0 && props.carInfoList.length > 0) {
    initChart(); // 数据已加载时初始化图表
  }
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  chart && chart.dispose();
  window.removeEventListener("resize", handleResize);
});
// 监控 props.personTypeList 和 props.carInfoList 的变化
watch(
  [() => props.personTypeList, () => props.carInfoList],
  ([newPersonTypeList, newCarInfoList]) => {
    if (newPersonTypeList.length > 0 && newCarInfoList.length > 0) {
      initChart(); // 数据变化后重新初始化图表
    }
  }
);
</script>

<style lang="scss" scoped>
.left-top-box {
  height: 350px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;

  .my-chart {
    width: 100%;
    height: 300px;
  }

  .chart-img {
    width: 112px;
    height: 112px;
    position: absolute;
    bottom: 57px;
    left: 38.2%;
    z-index: -1;
    background: url("../../../../assets/images/bgc-personnel.png") no-repeat
      center/cover;
  }
}
</style>
